<template>
  <div style="height: 100%;overflow-y: auto">
    <a-col :span="16" class="left" style="padding:20px 20px 20px 40px; box-sizing:border-box;">
      <a-col style="margin-bottom:-16px;    font-size: 1.4rem;
    line-height: 1.5;
    word-wrap: break-word;">已管理商品</a-col>
      <a-spin :spinning="loading">
        <a-table
          bordered
          :columns="columns"
          :pagination="ipagination"
          :data-source="dataSource"
          rowKey="orderNum"
          style="margin-top: 36px"
          @change="handleTableChange"
        >
          <a slot="name" slot-scope="text">{{ text }}</a>
          <span slot="TimeDeal" slot-scope="text, record">
            {{ timeFormat(record.createTime, 'yyyy/MM/dd hh:mm:ss') }}
          </span>
          <span slot="action" slot-scope="text, record">
            <a-button type="primary" @click="check(record)" style="margin-right: 6px">
              查看
            </a-button>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
          </span>
        </a-table>
      </a-spin>
    </a-col>
    <a-col :span="8" class="right">
      <a-card :bordered="false" style="background:none;">
        <h3>基本信息</h3>
        <a-row type="flex" justify="space-between">
          <p>服务代码</p><p class="des">{{ detail.serviceCode }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务名称</p><p class="des">{{ detail.serviceName }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务归属域</p><p class="des">{{ detail.serviceScope }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务分类</p><p class="des">{{ detail.serviceType }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务说明</p>
          <a-button size="small" @click="showInfo(detail.serviceDesc,'服务说明')" type="primary" style="height:24px; margin-top:6px;">查看</a-button>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>服务介绍</p>
          <a-button size="small" @click="showInfo(detail.serviceExplain,'服务介绍')" type="primary" style="height:24px; margin-top:6px;">查看</a-button>
        </a-row>
        <h3 style="margin-top:48px;">操作信息</h3>
        <a-row type="flex" justify="space-between">
          <p>创新时间</p><p class="des">{{ timeFormat(detail.createTime,'yyyy/MM/dd hh:mm:ss') }}</p>
        </a-row>
        <a-row type="flex" justify="space-between">
          <p>创建人</p><p class="des">{{ detail.createBy }}</p>
        </a-row>
      </a-card>
    </a-col>
  </div>
</template>
<script>
import { axios } from '@/utils/request'
export default {
  name: 'ModelManage',
  components: {

  },
  data () {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
      other: '',
      loading: false,
      // detail: {},
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      dataSource: [],
      columns: [
        {
          title: '用户ID',
          dataIndex: 'userId',
          align: 'center'
        },
        {
          title: '登录手机号',
          dataIndex: 'userPhone',
          align: 'center'
        },
        {
          title: '充值手机号',
          dataIndex: 'memberPhone',
          align: 'center'
        },
        {
          title: '充值结果',
          dataIndex: 'activeStatus',
          align: 'center',
          customRender: text =>['未充值','充值中','充值成功','充值失败','部分失败'][text]
        }
      ]
    }
  },
  props: {
    state: {
      type: String,
      default: 'add'
    },
    timeFormat: {
      type: Function,
      default: null
    },
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
  },
  watch: {

  },
  mounted () {
    this.getDetail();
  },
  methods: {
    onClose () {
      this.$emit('closedrawer')
      this.resetForm()
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
    },
    getDetail () {
      this.loadData (1)
    },
    loadData (arg) {
      this.loading = true
      if(arg) this.ipagination.current = arg
      let pageSet = {
        pageNo:this.ipagination.current,
        pageSize:this.ipagination.pageSize,
      }
      let params = Object.assign(pageSet,{ serviceCode: this.detail.serviceCode })
      axios.get('/service-sale/member/order/list', { params: params }).then(data => {
        console.log(data)
        this.loading = false
        this.ipagination.total = data.totalCount
        this.dataSource = data.data
      })
    },
    handleTableChange (pagination) {
      this.ipagination = pagination
      this.loadData()
    },
    showInfo (info, title) {
      this.$info({
        title: title,
        content: info,
        onOk () {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
/*.left,.right {*/
/*  top: 54px;*/
/*  left: 0;*/
/*  bottom: 0;*/
/*  overflow-x: hidden;*/
/*  overflow-y: auto;*/
/*  position: absolute;*/
/*}*/
.right {
  left: auto;
  right: 0;
  height: 100%;
  background: #f2f2f2;
  h3 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 12px;
    &::before {
      content: '';
      background: #4388A6;
      width: 6px;
      height: 16px;
      display: inline-block;
      position: relative;
      top: 2px;
      margin-right: 6px;
    }
  }
  p {
    font-size: 14px;
    color: #333;
    line-height: 36px;
    &.des {
      opacity: 0.75;
    }
  }
}
</style>
